<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报数游戏 - 自定义规则与先后手</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #fff;
        }
        
        .container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            width: 100%;
            max-width: 700px;
            padding: 35px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        h1 {
            color: #fff;
            margin-bottom: 25px;
            font-size: 32px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .settings {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 25px;
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            border-radius: 12px;
            border-left: 5px solid #00b4db;
        }
        
        .settings h3 {
            color: #00b4db;
            margin-bottom: 10px;
            text-align: left;
        }
        
        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .settings-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex: 1;
            min-width: 200px;
        }
        
        .settings label {
            font-weight: bold;
            color: #00b4db;
            text-align: left;
        }
        
        .settings input, .settings select {
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 16px;
            text-align: center;
        }
        
        .settings button {
            padding: 12px 25px;
            background: linear-gradient(to right, #00b4db, #0083b0);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-top: 10px;
        }
        
        .settings button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .game-info {
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            text-align: left;
            border-left: 5px solid #00b4db;
        }
        
        .rules {
            margin-bottom: 15px;
        }
        
        .rules h3 {
            color: #00b4db;
            margin-bottom: 10px;
        }
        
        .rules ul {
            padding-left: 20px;
        }
        
        .rules li {
            margin-bottom: 8px;
            color: #ccc;
        }
        
        .difficulty {
            margin-top: 15px;
            padding: 10px;
            background: rgba(255, 0, 0, 0.2);
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            color: #ff4d4d;
        }
        
        .total-display {
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            margin: 25px 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        .progress-bar {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin-top: 10px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(to right, #00b4db, #00ff95);
            width: 0%;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(0, 255, 149, 0.5);
        }
        
        .buttons {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin: 25px 0;
            flex-wrap: wrap;
        }
        
        .number-btn {
            padding: 18px 25px;
            font-size: 20px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            background: linear-gradient(to right, #00b4db, #0083b0);
            color: white;
            min-width: 80px;
        }
        
        .btn-reset {
            background: linear-gradient(to right, #8e2de2, #4a00e0);
            color: white;
            margin-top: 15px;
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        button:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        button:before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
            transform: translateY(100%);
            transition: transform 0.3s ease;
            z-index: 1;
        }
        
        button:hover:before {
            transform: translateY(0);
        }
        
        .history {
            margin-top: 25px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            text-align: left;
            max-height: 250px;
            overflow-y: auto;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .history h3 {
            color: #00b4db;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .history-item {
            padding: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .player {
            font-weight: bold;
            color: #00ff95;
            text-shadow: 0 0 5px rgba(0, 255, 149, 0.5);
        }
        
        .computer {
            font-weight: bold;
            color: #ff4e50;
            text-shadow: 0 0 5px rgba(255, 78, 80, 0.5);
        }
        
        .message {
            margin: 20px 0;
            padding: 15px;
            border-radius: 12px;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .win {
            color: #00ff95;
            text-shadow: 0 0 10px rgba(0, 255, 149, 0.5);
            animation: pulse 1.5s infinite;
        }
        
        .lose {
            color: #ff4e50;
            text-shadow: 0 0 10px rgba(255, 78, 80, 0.5);
        }
        
        .thinking {
            background: rgba(0, 0, 0, 0.3);
            color: #00b4db;
            padding: 12px;
            border-radius: 8px;
            margin: 15px 0;
            font-style: italic;
            text-align: center;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        @media (max-width: 600px) {
            .buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .settings-row {
                flex-direction: column;
            }
            
            .settings-group {
                min-width: 100%;
            }
            
            button {
                width: 100%;
            }
            
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>报数游戏：自定义规则与先后手</h1>
        
        <div class="settings">
            <h3>游戏设置：</h3>
            <div class="settings-row">
                <div class="settings-group">
                    <label for="min-number">最小报数：</label>
                    <input type="number" id="min-number" min="1" max="10" value="1">
                </div>
                <div class="settings-group">
                    <label for="max-number">最大报数：</label>
                    <input type="number" id="max-number" min="2" max="20" value="2">
                </div>
                <div class="settings-group">
                    <label for="target-total">目标总数：</label>
                    <input type="number" id="target-total" min="5" max="100" value="10">
                </div>
                <div class="settings-group">
                    <label for="first-player">先手玩家：</label>
                    <select id="first-player">
                        <option value="player">玩家先手</option>
                        <option value="computer">电脑先手</option>
                    </select>
                </div>
            </div>
            <button id="apply-settings">应用设置并重新开始</button>
        </div>
        
        <div class="game-info">
            <div class="rules">
                <h3>当前规则：</h3>
                <ul>
                    <li>两人轮流报数，每次只能报 <strong><span id="current-min">1</span></strong> 到 <strong><span id="current-max">2</span></strong> 之间的数字</li>
                    <li>把两人报的所有数加起来</li>
                    <li>谁报数后总和达到 <strong><span id="current-target">10</span></strong>，谁就获胜</li>
                    <li id="current-turn">您先报数，请选择一个数字开始游戏</li>
                    <li>电脑每次也只能报 <strong><span id="current-min2">1</span></strong> 到 <strong><span id="current-max2">2</span></strong> 之间的数字</li>
                </ul>
            </div>
            <div class="difficulty">
                难度：智能AI - 电脑会根据规则调整策略！
            </div>
        </div>
        
        <div class="total-display">
            当前总和: <span id="current-total">0</span> / <span id="max-total">10</span>
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
        </div>
        
        <div class="buttons" id="number-buttons">
            <!-- 数字按钮将由JavaScript动态生成 -->
        </div>
        
        <div id="thinking" class="thinking" style="display: none;">电脑思考中...</div>
        
        <div id="message" class="message"></div>
        
        <div class="history">
            <h3>报数记录</h3>
            <div id="history-list"></div>
        </div>
        
        <button class="btn-reset" id="reset">重新开始游戏</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const minNumberInput = document.getElementById('min-number');
            const maxNumberInput = document.getElementById('max-number');
            const targetTotalInput = document.getElementById('target-total');
            const firstPlayerSelect = document.getElementById('first-player');
            const applySettingsBtn = document.getElementById('apply-settings');
            const currentMinDisplay = document.getElementById('current-min');
            const currentMin2Display = document.getElementById('current-min2');
            const currentMaxDisplay = document.getElementById('current-max');
            const currentMax2Display = document.getElementById('current-max2');
            const currentTargetDisplay = document.getElementById('current-target');
            const currentTurnDisplay = document.getElementById('current-turn');
            const currentTotalDisplay = document.getElementById('current-total');
            const maxTotalDisplay = document.getElementById('max-total');
            const numberButtonsContainer = document.getElementById('number-buttons');
            const resetBtn = document.getElementById('reset');
            const messageDiv = document.getElementById('message');
            const historyList = document.getElementById('history-list');
            const thinkingDiv = document.getElementById('thinking');
            const progressBar = document.getElementById('progress');
            
            let minNumber = 1;
            let maxNumber = 2;
            let targetTotal = 10;
            let firstPlayer = 'player';
            let total = 0;
            let gameOver = false;
            
            // 初始化游戏
            function initGame() {
                total = 0;
                gameOver = false;
                currentTotalDisplay.textContent = '0';
                maxTotalDisplay.textContent = targetTotal;
                updateProgress();
                messageDiv.textContent = '';
                messageDiv.className = 'message';
                historyList.innerHTML = '';
                thinkingDiv.style.display = 'none';
                
                // 更新当前规则显示
                currentMinDisplay.textContent = minNumber;
                currentMin2Display.textContent = minNumber;
                currentMaxDisplay.textContent = maxNumber;
                currentMax2Display.textContent = maxNumber;
                currentTargetDisplay.textContent = targetTotal;
                
                // 更新先手显示
                if (firstPlayer === 'player') {
                    currentTurnDisplay.textContent = '您先报数，请选择一个数字开始游戏';
                } else {
                    currentTurnDisplay.textContent = '电脑先报数，请等待电脑行动';
                }
                
                // 生成数字按钮
                generateNumberButtons();
                
                addHistory(`游戏开始，目标总数: ${targetTotal}，当前总和: 0`);
                addHistory(`每次可报数字: ${minNumber} 到 ${maxNumber}`);
                addHistory(`先手玩家: ${firstPlayer === 'player' ? '玩家' : '电脑'}`);
                
                // 根据先手设置开始游戏
                if (firstPlayer === 'computer') {
                    const buttons = document.querySelectorAll('.number-btn');
                    buttons.forEach(btn => btn.disabled = true);
                    thinkingDiv.style.display = 'block';
                    
                    // 随机延迟，增加紧张感
                    const delay = 800 + Math.random() * 1000;
                    setTimeout(computerMove, delay);
                }
            }
            
            // 生成数字按钮
            function generateNumberButtons() {
                numberButtonsContainer.innerHTML = '';
                
                for (let i = minNumber; i <= maxNumber; i++) {
                    const button = document.createElement('button');
                    button.className = 'number-btn';
                    button.textContent = `报数: ${i}`;
                    button.dataset.value = i;
                    button.addEventListener('click', function() {
                        playerMove(i);
                    });
                    numberButtonsContainer.appendChild(button);
                }
            }
            
            // 应用设置
            function applySettings() {
                const newMin = parseInt(minNumberInput.value);
                const newMax = parseInt(maxNumberInput.value);
                const newTarget = parseInt(targetTotalInput.value);
                const newFirstPlayer = firstPlayerSelect.value;
                
                if (isNaN(newMin) || newMin < 1 || newMin > 10) {
                    alert('最小报数必须是1到10之间的有效数字');
                    minNumberInput.value = minNumber;
                    return;
                }
                
                if (isNaN(newMax) || newMax < newMin || newMax > 20) {
                    alert('最大报数必须大于最小报数且不超过20');
                    maxNumberInput.value = maxNumber;
                    return;
                }
                
                if (isNaN(newTarget) || newTarget < 5 || newTarget > 100) {
                    alert('目标总数必须是5到100之间的有效数字');
                    targetTotalInput.value = targetTotal;
                    return;
                }
                
                minNumber = newMin;
                maxNumber = newMax;
                targetTotal = newTarget;
                firstPlayer = newFirstPlayer;
                
                initGame();
            }
            
            // 更新进度条
            function updateProgress() {
                const progress = (total / targetTotal) * 100;
                progressBar.style.width = `${Math.min(progress, 100)}%`;
            }
            
            // 添加历史记录
            function addHistory(text) {
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.innerHTML = text;
                historyList.appendChild(historyItem);
                historyList.scrollTop = historyList.scrollHeight;
            }
            
            // 玩家报数
            function playerMove(value) {
                if (gameOver) return;
                
                total += value;
                currentTotalDisplay.textContent = total;
                updateProgress();
                
                addHistory(`<span class="player">玩家</span> 报数: <strong>${value}</strong>，当前总和: <strong>${total}</strong>`);
                
                // 检查玩家是否获胜
                if (total >= targetTotal) {
                    endGame('恭喜！您获胜了！', true);
                    return;
                }
                
                // 禁用按钮，电脑思考
                const buttons = document.querySelectorAll('.number-btn');
                buttons.forEach(btn => btn.disabled = true);
                thinkingDiv.style.display = 'block';
                
                // 随机延迟，增加紧张感
                const delay = 800 + Math.random() * 1000;
                setTimeout(computerMove, delay);
            }
            
            // 电脑报数
            function computerMove() {
                if (gameOver) return;
                
                thinkingDiv.style.display = 'none';
                let computerValue;
                
                // 电脑AI策略
                // 如果可以直接获胜
                for (let i = minNumber; i <= maxNumber; i++) {
                    if (total + i >= targetTotal) {
                        computerValue = targetTotal - total;
                        break;
                    }
                }
                
                // 如果不能直接获胜，使用策略
                if (computerValue === undefined) {
                    // 计算关键点：让对手处于不利位置
                    const range = maxNumber - minNumber + 1;
                    const keyPoint = (targetTotal - total - minNumber) % (range + 1);
                    
                    if (keyPoint >= minNumber && keyPoint <= maxNumber) {
                        computerValue = keyPoint;
                    } else {
                        // 随机选择一个值
                        computerValue = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber;
                    }
                }
                
                total += computerValue;
                currentTotalDisplay.textContent = total;
                updateProgress();
                
                addHistory(`<span class="computer">电脑</span> 报数: <strong>${computerValue}</strong>，当前总和: <strong>${total}</strong>`);
                
                // 检查电脑是否获胜
                if (total >= targetTotal) {
                    endGame('电脑获胜！', false);
                    return;
                }
                
                // 启用按钮，玩家继续
                const buttons = document.querySelectorAll('.number-btn');
                buttons.forEach(btn => btn.disabled = false);
            }
            
            // 结束游戏
            function endGame(msg, isWin) {
                gameOver = true;
                messageDiv.textContent = msg;
                messageDiv.className = 'message ' + (isWin ? 'win' : 'lose');
                
                const buttons = document.querySelectorAll('.number-btn');
                buttons.forEach(btn => btn.disabled = true);
                
                thinkingDiv.style.display = 'none';
                
                addHistory(`<strong>游戏结束: ${msg}</strong>`);
            }
            
            // 事件监听
            resetBtn.addEventListener('click', initGame);
            
            applySettingsBtn.addEventListener('click', applySettings);
            
            minNumberInput.addEventListener('change', function() {
                const value = parseInt(this.value);
                if (value > parseInt(maxNumberInput.value)) {
                    maxNumberInput.value = value;
                }
            });
            
            maxNumberInput.addEventListener('change', function() {
                const value = parseInt(this.value);
                if (value < parseInt(minNumberInput.value)) {
                    minNumberInput.value = value;
                }
            });
            
            // 初始化游戏
            initGame();
        });
    </script>
</body>
</html>